<template>
	<view class="container">
		<!-- 商品图片 -->
		<view class="goods-img">
			<image :src="goods.goodsimg" mode="widthFix"></image>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<!-- 商品名称 -->
			<view class="goods-info-title">
				<text>{{goods.imgtitle}}</text>
			</view>
			<!-- 商品价格 -->
			<view class="goods-info-price">
				￥<text>{{goods.goodsprice | fixed}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mygoodslist",
		// 父组件参数
		props: {
			goods: {
				type: Object
			}
		},
		onLoad() {
			console.log(this.goods);
		},
		data() {
			return {

			};
		},
		filters: {
			// 两位小数价格格式化输出
			fixed(value) {
				return Number(value).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: space-between;

		.goods-img {
			width: 170px;
			height: 170px;

			image {
				width: 170px;
			}
		}

		.goods-info {
			font-size: 14px;
			color: black;
			padding: 10px;

			.goods-info-price {
				color: red;
				margin-top: 10px;
				font-size: 18px;
			}
		}
	}
</style><template>
	<view class="container">
		<!-- 商品图片 -->
		<view class="goods-img">
			<image :src="goods.goodsimg" mode="widthFix"></image>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<!-- 商品名称 -->
			<view class="goods-info-title">
				<text>{{goods.imgtitle}}</text>
			</view>
			<!-- 商品价格 -->
			<view class="goods-info-price">
				￥<text>{{goods.goodsprice | fixed}}</text>
			</view>
			<view class="goods-info-particulars">
				<text>{{goods.goodsparticulars}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mygoodslist",
		// 父组件参数
		props: {
			goods: {
				type: Object
			}
		},
		onLoad() {
			console.log(this.goods);
		},
		data() {
			return {

			};
		},
		filters: {
			// 两位小数价格格式化输出
			fixed(value) {
				return Number(value).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: space-between;

		.goods-img {
			width: 170px;
			height: 170px;

			image {
				width: 170px;
			}
		}

		.goods-info {
			font-size: 14px;
			color: black;
			padding: 10px;

			.goods-info-price {
				color: red;
				margin-top: 10px;
				font-size: 18px;
			}
			.goods-info-particulars{
				margin-top: 15rpx;
				font-size: 30rpx;
			}
		}
	}
</style>